<template>
	<view class="font">
		<uni-nav-bar :border="false">
			<!-- <block slot="left">
				<liu-bubble-menu elementId="data-select1" :dataList="dataList" @change="more" bgColor="#666666" :iconsList="iconsList">
					<uni-icons id="data-select1" type="bars" />
				</liu-bubble-menu>
			</block>
			<view class="input-view">
				<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
				<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
					@confirm="confirm" />
			</view> -->
			<block slot="right">
				<view class="create" @click="create">
					创建
				</view>
			</block>
		</uni-nav-bar>
		<view class="main" v-for="(item,index) in questionnaire" :key="index" @click='showMenu(item.formId,item.questionnaireNames,item.questionnaireDescription,item.status)'>
			<lxCoupon :preferential="item.questionnaireNames" :cardId="item.formId" :status="item.status"
				:number='item.answerNumber' />
		</view>
		<view class="mark" v-show="show" @click="closeMark"></view>
		<view class="content-card" v-show="show">
			<view class="title">
				<text>{{title}}(ID:{{formId}})</text>
			</view>
			<o-grid border col="3" radius title="功能菜单" bg="bg-white">
				<o-grid-item :text="status?'暂停':'发布'" mode="aspectFill" :icon="status?'&#xe635;':'&#xe63c;'" @click='release(status)'/>
				<o-grid-item text="编辑" mode="aspectFill" icon="&#xe600;" @click='edit(formId,title,questionnaireDescription)'/>
				<o-grid-item text="删除" mode="aspectFill" icon="&#xe74b;" @click='delQue'/>
				<o-grid-item text="查询" mode="aspectFill" icon="&#xe739;" @click='query(formId,title,status)'/>
				<o-grid-item text="统计" mode="aspectFill" icon="&#xe64a;" @click='statistical(formId,title)'/>
			</o-grid>
		</view>
	</view>
</template>

<script>
	import lxCoupon from '@/components/common/lx-coupon/lx-coupon.vue'
import { createLogger } from 'vuex';
	var _this;
	export default {
		data() {
			return {
				// dataList: ['个人中心', '互填问卷', '在线客服', '回收站','退出'],
				// iconsList:['person','compose','chatbubble','trash','undo'],
				questionnaire: [],
				show: false,
				title: "",
				formId: "",
				questionnaireDescription:"",
				status:0
			}
		},
		components: {
			lxCoupon
		},
		onLoad() {
			_this = this
		},
		onShow() {
			this.$request('/QuestionnairePageController/prepare')
				.then((res) => {
					res.data.data.reverse();
					this.questionnaire = res.data.data
				}).catch((err) => {
					console.log(err);
				})
		},
		methods: {
			showMenu(id,title,Description,status){
				this.formId = id
				this.title = title
				this.questionnaireDescription = Description
				this.status = status
				this.show = true
			},
			closeMark() {
				this.show = false
			},
			more(e) {
				console.log(e);
			},
			create() {
				uni.navigateTo({
					url: '/components/create-questionnaire/index'
				})
			},
			edit(id, title, instructions) {
				if(_this.status){
					 uni.showModal({
						title:"系统提示",
						content:"修改问卷不会改变问卷链接,但会暂停收集答卷,修改完后请再次发布",
						success: (res) => {
							if(res.confirm){
								 _this.release(_this.status);
							}
						}
					})
					return ;
				}
				uni.navigateTo({
					url: '/components/create-questionnaire/edit?formid=' + id + '&title=' + title + '&temporary_explain=' + instructions
				})
			},
			delQue(){
				let data = {
					formid:this.formId
				}
				this.$request('/QuestionnairePageController/deleteQuestionnaire','POST',data)
				.then(res=>{
					for (var i = 0; i < _this.questionnaire.length; i++) {
						if(_this.questionnaire[i].formId == _this.formId){
							_this.questionnaire.splice(i,1)
						}
					}
					uni.showToast({
						title:res.data.msg,
						icon:"success",
						success: () => {
							_this.show = false
						}
					})
				})
			},
			query(id,name,status){
				if(status){
					uni.navigateTo({
						url:'/components/common/query/query?title='+name+'&formid='+id
					})
				}else{
					uni.showModal({
						title:"系统提示",
						content:"问卷发布后才能查询，确认发布吗？",
						success: (res) => {
							if(res.confirm){
								this.$request('/QuestionnairePageController/QuestionnaireRelease','POST',{formid:this.formId,status:1})
								.then(res=>{
									_this.status = 1
									uni.navigateTo({
										url:'/components/common/query/query?title='+name+'&formid='+id
									})
								})
							}
						}
					})
				}
			},
			release(status){
				if(status){
					uni.showModal({
						title:"系统提示",
						content:"暂停后问卷将无法填写,确认吗?",
						success(res){
							if(res.confirm){
								let data = {
									formid:_this.formId,
									status:0
								}
								_this.$request('/QuestionnairePageController/QuestionnaireRelease','POST',data)
								.then(res=>{
									_this.status = 0
									for (var i = 0; i < _this.questionnaire.length; i++) {
										if (_this.questionnaire[i].formId == _this.formId) {
											_this.questionnaire[i].status = 0
										}
									}
									return 1
								})
							}
						}
					})
				}else{
					let data = {
						formid:_this.formId,
						status:1
					}
					_this.$request('/QuestionnairePageController/QuestionnaireRelease','POST',data)
					.then(res=>{
						_this.status = 1
						for (var i = 0; i < _this.questionnaire.length; i++) {
							if (_this.questionnaire[i].formId == _this.formId) {
								_this.questionnaire[i].status = 1
							}
						}
						uni.showModal({
							title:"系统提示",
							content:"发布成功",
						})
					})
					
				}
			},
			statistical(id,title){
				uni.navigateTo({
					url:'/components/common/statistical/statistical?formid='+id+'&title='+title
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f3f4f5;
	}

	.input-view {
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		// width: 500rpx;
		flex: 1;
		background-color: #f8f8f8;
		height: $nav-height;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		margin: 7px 0;
		line-height: $nav-height;
	}

	.input-uni-icon {
		line-height: $nav-height;
	}

	.nav-bar-input {
		height: $nav-height;
		line-height: $nav-height;
		/* #ifdef APP-PLUS-NVUE */
		width: 370rpx;
		/* #endif */
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}

	.create {
		background-color: #80b156;
		width: 100rpx;
		height: 50rpx;
		font-size: 13px;
		color: #fff;
		border-radius: 20px;
		text-align: center;
		line-height: 50rpx
	}

	.mark {
		position: fixed;
		height: 40%;
		color: #fff;
		background: rgba(0, 0, 0, 0.5);
		top: 0;
		left: 0%;
		right: 0%;
		font-size: 26rpx;
		text-align: center;
		box-shadow: 2px -3px 100px -5px #FFFFFF;
		z-index: 66;
	}

	.content-card {
		width: 100vw;
		height: 60%;
		background-color: white;
		position: fixed;
		  bottom: 0;
		z-index: 99;
	}

	.title {
		margin: 10px;
		font-size: 14px;
	}
	
</style>